<template>
	<view class="contont">
		<nav-bar :title="title" :iconLeft="true" />
		<view class="content-bgc">
			<view class="b-con">
				<up-cell-group :border="false">
					<up-cell title="请输入发货单号">
						<template #value>
							<view class="cell-text">{{ detail_record.code }} </view>
						</template>
					</up-cell>
					<up-cell title="销售单号">
						<template #value>
							<view class="cell-text">{{ detail_record.market_order_code }} </view>
						</template>
					</up-cell>
					<up-cell title="交货日期">
						<template #value>
							<view class="cell-text">{{ mar_or.delivery_date }} </view>
						</template>
					</up-cell>
					<up-cell title="客户">
						<template #value>
							<view class="cell-text">{{ mar_or.client_name }} </view>
						</template>
					</up-cell>
					<up-cell title="已发货数量">
						<template #value>
							<view class="cell-text">{{ mar_or.finish_num }} </view>
						</template>
					</up-cell>
					<up-cell title="订单金额">
						<template #value>
							<view class="cell-text">{{ mar_or.all_price }} </view>
						</template>
					</up-cell>
					<up-cell title="发货日期">
						<template #value>
							<view class="cell-text">{{ detail_record.shipments_date }} </view>
						</template>
					</up-cell>
					<up-cell title="备注">
						<template #value>
							<view class="cell-text" style="width: 70%;">{{ detail_record.desc }}</view>
						</template>
					</up-cell>
				</up-cell-group>
			</view>
			<view class="b-con">
				<up-cell-group :border="false">
					<up-cell :isLink="true" :border="false" :title="`产品：总数量（${car_list.length}）`" @click="car_popupShow = true">
						<template #value>
							<view class="cell-text">点击查看 </view>
						</template>
					</up-cell>
				</up-cell-group>
			</view>
			<custom-popup :popupShow="car_popupShow" mode="bottom" :title="'产品'" @close="car_popupShow = false" height="70vh">
				<z-paging v-if="car_popupShow" ref="paging_car" :refresher-enabled="false" :loading-more-enabled="false" :fixed="false" v-model="car_list"
					@query="queryList_car">
					<uni-card v-for="(item, index) in car_list" :key="index" :title="item.name" :sub-title="item.code"
						margin="5px" spacing="0">
						<view class="ctent">规格：{{ item.specification }}</view>
						<view class="con">
							<view class="ctent ">成本价：{{ item.cost }}</view>
							<view class="ctent ">销售单价：{{ item.main_price }}</view>
						</view>
						<view class="con">
							<view class="ctent ">总发货数：{{ item.num }}</view>
							<view class="ctent ">优惠率（%）：{{ item.discount }}</view>
						</view>
						<view class="con">
							<view class="ctent ">总金额：{{ item.total_price }}</view>
							<view class="ctent ">已发货数量：{{ item.up_num }}</view>
						</view>
						<view class="ctent">发货仓库：{{ item.warehouse_name }}</view>
						<view class="con">
							<view class="ctent">发货数：{{ item.now_num }}</view>
							<view class="ctent ">发货总金额：{{ item.now_price }}</view>
						</view>
						<view class="ctent ">单位：{{ item.shipment_unit }}</view>
						<view class="ctent">备注：{{ item.desc }}</view>
					</uni-card>

				</z-paging>
			</custom-popup>
		</view>
	</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import oSalesOutApi from '../../../api/order/o_sales_out'

const detail_record = ref({})
const title = '销售单发货详情';
onLoad(option => {
	get_detail(option.id)
})

const mar_or = reactive({
	delivery_date: '',
	client_name: '',
	finish_num: 0,
	all_price: 0,
})

const car_popupShow = ref(false)
const car_list = ref([])

function get_detail(id) {
	oSalesOutApi.shipments_order_detail(id).then(res => {
		detail_record.value = res
		oSalesOutApi.market_order_detail(res.market_order).then(res2 => {
			mar_or.delivery_date = res2.delivery_date
			mar_or.client_name = res2.client_name
			res2.market_order_products.forEach(v => {
				const all_price = v.main_price * v.num
				mar_or.finish_num = mar_or.finish_num + parseFloat(v.finish_num)
				mar_or.all_price = mar_or.all_price + all_price
			})
			car_list.value = res.shipment_order_products.map(v => {
				return {
					id: v.product.id,
					code: v.product.code,
					name: v.product.name,
					specification: v.specification,
					royalties: v.royalties,
					cost: v.cost,
					main_price: v.main_price,
					discount: parseFloat(v.discount),
					total_price: v.total_price,
					main_price: v.main_price,
					num: v.num,
					up_num: v.up_num,
					shipment_unit: v.shipment_unit,
					now_num: v.now_num,
					now_price: v.now_price,
					warehouse_name: v.warehouse_name,
					desc: res.desc
				}
			})
		})
	})
};

const paging_car = ref(null)
function queryList_car() {
	paging_car.value.complete(car_list.value);
}

</script>

<style lang="scss">
.car-popup-custom {
	.section_item {
		margin: 12rpx 0;

		.swipe-action {
			position: relative;

			.del-icon {
				position: absolute;
				top: 20%;
				right: 4%;
			}
		}
	}
}
</style>